<template>
	<view class="box">
		<u-navbar title="租约编辑" @leftClick="leftClick" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="right">
				<u-icon name="checkmark" label="完成" labelColor="#f05a23" color="#f05a23" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="card_head">
			<view class="column">
				姓名:<u--input placeholder="请输入内容" border="none" v-model="data.tenantName" clearable></u--input>
			</view>
			<view class="column">
				性别:
				<view class="slot_floor">
					<view :class="['item', data.tenantGender == 0 ? 'active_floor' :'']" @click="data.tenantGender = 0">
						男
					</view>
					<view :class="['item', data.tenantGender == 1 ? 'active_floor' :'']" @click="data.tenantGender = 1">
						女
					</view>
				</view>
				<!-- <u--input placeholder="请输入内容" border="none" v-model="data.tenantGender"
							clearable ></u--input> -->
			</view>
			<!-- <view class="column">
				性别:{{data.tenantGender? data.tenantGender :'未知'}}
			</view> -->
			<view class="flexBetween">
				<view class="column">
					电话:<u--input placeholder="请输入内容" border="none" v-model="data.tenantPhone" type="number"
						clearable></u--input>
				</view>
				<!-- 	<view class="tab">
					7天后逾期
				</view> -->
			</view>
		</view>
		<!-- 租约信息 -->
		<view class="module" v-if="index ==0">
			<view class="card">
				<view class="row">
					<view class="title">
						租约状态
					</view>
					<view class="data">
						<view :class="['item', data.leaseState == 0 ? 'active_floor' :'']">
							未开始
						</view>
						<view :class="['item', data.leaseState == 1 ? 'active_floor' :'']">
							租赁中
						</view>
						<view :class="['item', data.leaseState == 2 ? 'active_floor' :'']">
							已终止
						</view>
					</view>
					<!-- <view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.leaseState"
							clearable></u--input>
					</view> -->
				</view>
				<view class="row">
					<view class="title">
						签约房源
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="info.houseRoomName"
							clearable></u--input>
					</view>
				</view>
				<view class="row">
					<view class="title">
						起止日期
					</view>
					<view class="data" @click="tiemShow = true">
						{{data.beginDate}}/{{data.endDate}}
						<!-- <u--input placeholder="请输入内容" border="none"  inputAlign="right" v-model="value" clearable></u--input> -->
					</view>
				</view>
				<view class="row">
					<view class="title">
						租期
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.tenancyTerm"
							clearable></u--input>
						<view>
							个月
						</view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						入住人数
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.peopleNumber"
							clearable></u--input>
						<view>
							人
						</view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						提前交租天数
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.rentDay"
							clearable></u--input>
						<view>
							天
						</view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						交租方式
					</view>
					<view class="data">
						<view class="" style="width: 300rpx;">
							<uni-data-select v-model="data.rentPayMode" :localdata="rentalModeRange"
								@change="data.rentPayMode = $event" :clear="false"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						租金
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.rent"
							clearable></u--input>
						<view>
							元
						</view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						房屋押金
					</view>
					<view class="data">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="data.deposit"
							clearable></u--input>
						<view>
							元
						</view>
					</view>
				</view>
			</view>
			<!-- 		<view class="card">
					<view class="row">
					<view class="title">
						租约备注
					</view>
					<view class="data" @click="remark">
						<view>
							添加备注
						</view>
						<u-icon name="arrow-right" color="#2979ff" size="18"></u-icon>
					</view>

				</view>
				<view class="contract">
					<view style="margin-right: 20rpx;">
						纸质合同
					</view>
					<view class="tab _a" @click="download" >
						下载
					</view>
				</view>
				<u--image :showLoading="true" v-for="(item, index) of data.mediaList" :key="index"
					:src="item.mediaUrl || '../../../static/default/404.png'" width="80px" height="100px"
					style="display: inline-block; margin-right: 10rpx;"></u--image>
			</view> -->
		</view>
		<!-- 未收费用 -->
		<view class="module" v-if="index ==1">
			<view class="card" v-for="(item, index) in data.uncollectedList" :key="item.id">
				<template v-if="item.payStatus == 0">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金(1个月)
						</view>
						<view class="data">
							{{item.actualAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>

			</view>
		</view>

		<view class="module" v-if="index ==2">
			<view class="card" v-for="(item,index) in data.receivedList" :key="item.id">
				<template v-if="item.payStatus == 2">
					<view class="row">
						<view class="houseRoomName">
							{{data.houseRoomName}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							租金(1个月)
						</view>
						<view class="data">
							{{item.actualAmount}}
						</view>
					</view>

					<view class="row">
						<view class="title">
							账期
						</view>
						<view class="data">
							{{item.billPeriod}}
						</view>
					</view>
					<view class="row">
						<view class="title">
							约定提前收租日
						</view>
						<view class="tab">
							{{item.receivableDate}}
						</view>
					</view>
				</template>

			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="tiemShow" v-model="value1" mode="date" :formatter="formatter"
			@cancel="tiemShow = false" @change="change" @confirm="confirm"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// import {
	// 	getLeaseDetail
	// } from '@/api/lease/index.js';
	import {
		landlordLeaseHouse,
		getUpdateLease
	} from "@/api/house/index.js"
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"
	export default {
		components: {
			uniDataSelect

		},
		data() {
			return {
				value: '',
				data: {
					id: null,
					houseId: "",
					tenantName: '',
					rentPayMode: '',
					tenantGender: 0,
					tenantPhone: '',
					tenantIdCard: '',
					tenantCardUrl: '',
					leaseType: '',
					beginDate: '',
					endDate: '',
					tenancyTerm: '',
					peopleNumber: '',
					rentDay: '',
					rentPayMode: '',
					rent: '',
					deposit: '',
					additionalProvisions: ''
				},
				info: {
					houseRoomName: ''
				},
				index: 0,
				show: false,
				phoneNumber: '',
				tiemShow: false,
				radiovalue1: '',
				value1: Number(new Date()),
				rentalModeRange: [{
						value: 1,
						text: "一月一付"
					},
					{
						value: 2,
						text: "二月一付"
					},
					{
						value: 3,
						text: "三月一付"
					},
					{
						value: 6,
						text: "半年一付"
					},
					{
						value: 12,
						text: "一年一付"
					}
				],
				list1: [{
					name: '租约信息',
				}, {
					name: '未收费用',
				}, {
					name: '已收费用'
				}],
				list: [{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					},
					{
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}, {
						title: '2023.12-19/2024-01-08',
						tab: '线下支付',
						tiem: ':2023.12-19',
						money: '770.00'
					}
				],
				src: '../../../static/defalut/404.png'
			}
		},
		onLoad(optien) {
			this.availabilityDetail(optien.id)
			this.info = JSON.parse(optien.data)


		},
		methods: {
			leftClick() {
				uni.navigateBack(-1)
			},
			//修改完成
			async rightClick() {
				const res = await getUpdateLease({
					id: this.data.id,
					leaseType: this.data.leaseType,
					houseId: this.data.houseId,
					rentalType: "0",
					brokerId: '',
					brokerPhone: '',
					tenantId: this.data.tenantId,
					tenantName: this.data.tenantName,
					tenantGender: this.data.tenantGender, //性别
					tenantPhone: this.data.tenantPhone,
					tenantCardType: 0,
					tenantIdCard: this.data.tenantIdCard,
					tenantCardUrl: this.data.tenantCardUrl,
					peopleNumber: this.data.peopleNumber,
					rent: this.data.rent,
					deposit: this.data.deposit,
					tenancyTerm: this.data.tenancyTerm,
					beginDate: this.data.beginDate,
					endDate: this.data.endDate,
					rentPayMode: this.data.rentPayMode,
					rentDay: this.data.rentDay,
					additionalProvisions: this.data.additionalProvisions,
				})
				if (res.data.code != 200) {
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1000)

				} else {
					this.$refs.uToast.show({
						message: '修改成功',
						type: 'success'
					})
					setTimeout(() => {
						uni.navigateBack(-2)
						/* 	uni.navigateBack({
								delta:1,
								success() {
								        uni.$emit('update',{msg:'页面更新'})
								    },
							}) */
					}, 1000)
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			async availabilityDetail(id) {
				const res = await landlordLeaseHouse(id)
				if (res.data.code == 200) {
					this.data = res.data.data
				} else {
					that.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}

			},
			groupChange(e) {
				this.radiovalue1 = e
			},
			changehouseType(data) {

				this.data.houseKey = data
			},
			download() {
				if (this.data.mediaList.length == 0) return this.$refs.uToast.show({
					message: '暂无文件',
					type: 'error'
				})
				var that = this
				that.data.mediaList.map((item, index) => {
					uni.downloadFile({
						url: item.mediaUrl, // 需要下载的文件的网络地址
						success: function(res) {
							if (res.statusCode === 200) { // 确保请求成功
								// res.tempFilePath 是临时文件路径
								// 可以通过这个路径打开文件或者保存到本地指定位置
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function(saveRes) {

										that.$refs.uToast.show({
											message: '文件已保存',
											type: 'success'
										})
									},
									fail: function(err) {
										// console.error('文件保存失败', err);
										that.$refs.uToast.show({
											message: '文件保存失败',
											type: 'error'
										})
									}
								});
							} else {
								// console.error('下载文件失败，状态码：', res.statusCode);
								that.$refs.uToast.show({
									message: '下载文件失败',
									type: 'error'
								})
							}
						},
						fail: function(err) {
							that.$refs.uToast.show({
								message: '下载文件失败',
								type: 'error'
							})
						}
					});
				})

			},
			change(e) {

			},
			confirm() {
				this.tiemShow = false
			},
			contact() {
				this.show = true
			},
			showDetermine() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				});
			},
			click(item) {
				this.index = item.index
			},
			remark() {
				uni.navigateTo({
					url: './remark',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},
			clickDeail() {
				uni.navigateTo({
					url: './contract',
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.popup {
		padding: 30rpx;

		.cue {
			font-weight: bold;
			font-size: 40rpx;
			text-align: center;
			padding: 40rpx;
		}

		.button_box {
			@include flexBetween;

			.sure {
				margin-right: 10rpx;
			}
		}

		.button {
			margin-bottom: 20rpx;
		}
	}

	.tab {
		background-color: #4d89cb;
		color: #fff;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
	}

	.item {
		// float: right;
		display: inline-block;
		padding: 6rpx 12rpx;
		border: 1rpx solid #d6d6d6;
		margin-left: 10rpx;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.active_floor {
		background-color: $theme;
		border: 1rpx solid #d6d6d6 !important;
		color: #fff;
	}

	._a {
		border-radius: 30rpx;
	}

	.tab_ {
		background-color: #bad4fb;
		color: #4d89cb;
		padding: 5rpx 20rpx;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.money {
		font-weight: bold;
	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;
		font-size: 32rpx;

		.card_head {
			padding: 20rpx 30rpx 30rpx 30rpx;
			background-color: #fff;
			border-bottom: #dcdcdc solid 1rpx;

			.column {
				margin: 20rpx 0;
				width: 70%;
				display: flex;
				align-items: center;
			}

			.icon {
				float: right;
				width: 30%;
				@include flexCenter;
				flex-direction: column;
			}

			.flexBetween {
				@include flexBetween;
			}
		}

		.back {
			background-color: #fff;
			@include flexBetween;
			padding: 20rpx;
		}

		.row {
			@include flexBetween;
			padding: 20rpx 0;
		}

		.title {
			color: $noimportant;
			width: 35%;
		}

		.card {
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: #fff;
		}

		.data {
			display: flex;
			align-items: center;
			text-align: right;
		}

		.contract {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
		}

	}
</style>